<template>
	<div class="order">
		<orderTotal></orderTotal>
		<van-tabs v-model="tabActive" sticky swipeable @change="getList">
			<van-tab v-for="(item, index) in tabList" :key="index" :title="item.title">
				<div class="tps">
					<i class="iconfont icon-gantan"></i>
					<div class="tips-value">订单将会有5分钟延迟！其他常见问题请</div>
					<div class="tips-btn" @click="showTips">点击查看</div>
				</div>
				<van-pull-refresh v-model="item.isLoading" @refresh="onRefresh(item)" ref="refresh">
					<van-list
						v-model="item.loading"
						:finished="item.finished"
						:error.sync="item.error"
						finished-text="没有更多了"
						:immediate-check="false"
						ref="list"
						@load="onLoad(item, true)"
					>
						<transition-group name="van-fade">
							<goodsItem v-for="(good, gIndex) in item.goodsList" :item="good" :key="'good' + gIndex"></goodsItem>
						</transition-group>

						<van-skeleton
							v-for="i in 3"
							:key="'i' + i"
							:row-width="['100%', '40%', '60%', '30%']"
							avatar
							avatar-size="120px"
							avatar-shape="square"
							:row="4"
							:loading="item.loading"
						></van-skeleton>

						<div slot="item.error">
							<Empty src="../../assets/images/member/empty-member.png" offsetTop="117" emptyText="暂无提现记录~"></Empty>
						</div>
					</van-list>
				</van-pull-refresh>
			</van-tab>
		</van-tabs>
		<van-popup class="mask" v-model="isMask" title="温馨提示" closeable>
			<div class="mask-box">
				<div class="mask-box__title">
					<h2>提示</h2>
				</div>
				<div class="mask-box__value">
					您的订单确认收货3天后才可结算到您的可提现余额。
				</div>
				<div
					class="mask-box__btn"
					@click="
						() => {
							this.$router.push('member-help');
						}
					"
				>
					<i class="iconfont icon-kefu kf"></i>
					我有疑问
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import { Tab, Tabs, Skeleton, Popup } from 'vant';
import { Empty } from '@/components';
import orderTotal from './components/total';
import goodsItem from './components/goods-item';
import refresh from '../../utils/mixin/refresh';
export default {
	name: 'member-order',
	components: {
		'van-tabs': Tabs,
		'van-tab': Tab,
		'van-skeleton': Skeleton,
		'van-popup': Popup,
		orderTotal,
		goodsItem,
		Empty
	},
	data() {
		return {
			tabActive: 0,
			tabList: [
				{
					name: '全部'
				},
				{
					name: '入账中'
				},
				{
					name: '已入账'
				},
				{
					name: '已失效'
				}
			],
			// 混入当前页面需要的参数
			params: {
				status: '',
				order: 'orderCreateTime',
				sort: 'desc'
			},
			isMask: false
		};
	},
	created() {
		// 设置当前选中项
		if (this.$route.query.type) {
			this.tabActive = parseInt(this.$route.query.type) + 1;
		}
		// 请求服务接口
		this.service = this.$service.member.order.page;
		// 为tab数据添加上商品列表数据
		this.tabList = this.tabList.map((e, index) => {
			return {
				title: e.name,
				loading: false,
				finished: false,
				error: false,
				goodsList: [],
				isLoading: false,
				page: 1,
				index
			};
		});
		// 混入请求参数
		this.mixinParamsFn = (item, r) => {
			if (item.index == 1) {
				// 1入账中
				this.params.status = 0;
			} else if (item.index == 2) {
				// 2 已入账
				this.params.status = 1;
			} else if (item.index == 3) {
				// 3 失效
				this.params.status = 2;
			} else {
				// 删除请求参数
				delete this.params.status;
			}
			r(this.params);
		};
		this.onLoad(this.tabList[0]);
	},
	mixins: [refresh],
	methods: {
		showTips() {
			this.isMask = true;
		},
		getList(index) {
			this.refresh(this.tabList[index]);
		},
		refresh(item) {
			item.finished = true;
			item.isLoading = false;
			item.page = 1;
			this.onLoad(item);
		}
	}
};
</script>

<style lang="scss" scoped>
.tps {
	background: #fffaed;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #915e46;
	font-size: 24px;
	.tips-value {
		margin: 0 15px;
	}
	.tips-btn {
		border: 1px solid;
		border-radius: 18px;
		padding: 0px 16px;
	}
}
.mask {
	width: 628px;
	height: 370px;
	border-radius: 12px;
	.mask-box {
		.mask-box__title {
			text-align: center;
			font-size: 32px;
			margin-top: 48px;
			position: relative;
			.close {
				position: absolute;
				right: 32px;
				top: -30px;
				font-size: 40px;
				color: #d9d9d9;
			}
		}
		.mask-box__value {
			font-size: 28px;
			color: #616161;
			padding: 32px 58px;
		}
		.mask-box__btn {
			width: 322px;
			height: 68px;
			margin: auto;
			background: #f70114;
			border-radius: 48px;
			color: white;
			font-size: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			.kf {
				font-size: 35px;
				margin-right: 15px;
			}
		}
	}
}
.order {
	/* prettier-ignore */
	font-size: 14PX;
}
.van-list {
	min-height: 60vh;
}
.van-skeleton {
	background: $color-white;
	padding: 20px;
	.van-skeleton__content {
		padding-top: 0;
		@include flexBox(space-between, null, column);
		.van-skeleton__row {
			border-radius: 8px;
		}
	}
	.van-skeleton__avatar {
		border-radius: 16px;
	}
}

.total-desc {
	width: 100%;
	color: #915e46;
	// padding: 0 20px 10px;
	font-size: 22px;
	height: 64px;
	line-height: 64px;
	background: rgba(255, 250, 237, 1);
	padding-left: 72px;
	// @include flexBox(center, center);
	i {
		font-size: 28px;
	}
	a {
		border-radius: 50px;
		margin-left: 20px;
		font-size: 22px;
		height: 34px;
		line-height: 34px;
		border: 2px solid rgba(145, 94, 70, 1);
		border-radius: 18px;
		padding: 0 15px;
	}
}
</style>
